<template>
	<view>
		<view class="appealbox">
			<!-- 图片区域 -->
			<view class="listview flex ac">
				<view class="list-image">
					<image :src="detailsdata.main_picture">
					</image>
				</view>
				<view class="list-border flex ac" style="flex: 1;">
					<view style="flex: 1;">
						<view class="list-title">{{detailsdata.name}}</view>
						<view class="list-time" style="margin-bottom: 10rpx;">抓取时间： {{detailsdata.create_time}}</view>
						<view class="list-time" style="margin-bottom: 10rpx;">机器编号： {{detailsdata.machine_name}}</view>
						<view class="flex ac" style="font-size:25rpx;color:#686868;">
							<view>申诉状态： </view>
							<view style="flex: 1;color:#FE5E4C;">{{detailsdata.result==false?'未抓中':'抓中'}}</view>
							<view @click="otherrecords" class="textborder">其他记录</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 申诉理由 -->
			<view class="reasonbox">
				<view class="reasontitle flex ac">
					<view style="font-size: 30rpx;font-weight: 600;">申诉理由</view>
					<view style="font-size: 28rpx;color:#777777;">（申诉理由提交后不能修改）</view>
				</view>
				<u-radio-group v-model="cover.mode" @change="radioGroupChange" wrap="wrap">
					<u-radio active-color="#6f5ce3" size="60" :name="0">娃娃卡洞内（除了玩法机）</u-radio>
					<u-radio active-color="#6f5ce3" size="60" :name="1">掉洞成功却显示失败</u-radio>
					<u-radio active-color="#6f5ce3" size="60" :name="2">游戏中闪退问题</u-radio>
					<u-radio active-color="#6f5ce3" size="60" :name="3">卡顿或按键延迟问题</u-radio>
					<u-radio active-color="#6f5ce3" size="60" :name="4">机器硬件故障（爪子、机台）问题</u-radio>
				</u-radio-group>
			</view>
			<view style="width: 100%;height: 60rpx;"></view>
			<view class="reasontitle flex ac">
				<view style="font-size: 30rpx;">请具体描述申诉问题</view>
			</view>
			<view class="textarea-box">
				<textarea @input="describe" maxlength="50" class="neirong"
					placeholder-style="font-size:26rpx;color:#8a8a8a;" placeholder="请输入不少于8个字描述，可帮助您快速审核～"></textarea>
				<view class="textarea-text">{{lengatue}}/50</view>
			</view>
			<view class="reasontitle flex ac">
				<view style="font-size: 30rpx;">上传截图/凭证</view>
			</view>

			<view v-if="typevalue==''" class="uploadbox" @click="uploada">
				<image src="../../static/icon/upload.png"></image>
			</view>

			<!-- 上传图片 -->
			<view v-if="typevalue=='images'" class="uploadpictureimage">
				<view v-for="(item,index) in arrlist" :key="index" @tap="viewImage(index)" class="uploadpicture"
					style="position: relative;">
					<image :src='item.url' mode='aspectFill'></image>
					<view class="cuIcon-close" @tap.stop="delImg(index)">
						<image
							src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
						</image>
					</view>
				</view>
				<view v-if="arrlist.length<3" class="uploadpicture" @click="chooseImages">
					<image
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_tupian-68a2fba.png">
					</image>
				</view>
			</view>

			<!-- 上传视频 -->
			<view v-if="typevalue=='video'" class="uploadbox">
				<video :disabled="false" :controls="false"
					src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/main/1/17178588059.mp4" class="video"
					object-fit="fill">
					<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo"></cover-view>
				</video>
				<view class="cuIcon-closea" @tap.stop="delectVideo">
					<image
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</view>
			</view>

			<view class="uploadtext">为了帮您更好地解决问题，请务必上传照片/视频凭证</view>
			<view class="uploadwenzi">温馨提示</view>
			<view class="uploadwenzi">1、申诉必须在7天内提交申诉，逾期不能申诉；</view>
			<view class="uploadwenzi">2、申诉后，客服小姐姐会尽快为你处理，请关注消息中，耐心等待结果；</view>
			<view class="uploadwenzi">3、恶意申诉会被客服小姐姐关进小黑屋哦~</view>
			<view class="uploadwenzi">4、每日最多可申诉30局，滥用申诉功能，将会减少可申诉局数</view>
			<view style="width: 100%;height: 30rpx;"></view>
		</view>
		<view class="appealbuttom" @click="submit">提交申诉</view>
		<view style="width: 100%;height: 20rpx;"></view>

		<view class="preview-full" v-if="previewVideoSrc==true">
			<video :autoplay="true" :src="srcList" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoClose">
					<image style="width: 38rpx;height: 38rpx;"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</cover-view>
			</video>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				detailsdata: [],
				typevalue: '',
				id: '',
				cover: {
					mode: 0,
					typevalue: '娃娃卡洞内（除了玩法机）',
				},
				lengatue: 0,
				content: '',
				srcList: '',
				previewVideoSrc: false,
				imgList: [],
				arrlist: [],
			}
		},

		onLoad(e) {
			var that = this
			that.id = e.id
			that.playrecordata()
		},

		methods: {
			//详情
			async playrecordata(e) {
				let apply = await request(`${getApp().globalData.http}user/play_record`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					play_record_id: this.id,
				})
				this.detailsdata = apply.data.data
			},

			otherrecords(e) {
				uni.navigateTo({
					url: '/pages/appealrecord/appealrecord'
				})
			},

			uploada(e) {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages()
						} else {
							this.chooseVideo()
						}
					}
				});
			},

			//上传图片
			chooseImages(e) {
				uni.chooseImage({
					count: 3, //默认5
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.imgList = this.imgList.concat(res.tempFilePaths)
						this.tudata()
					}
				});
			},

			// 上传图片后端返回图片链接
			tudata(e) {
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				var arr = []
				for (let i = 0; i < that.imgList.length; i++) {
					uni.uploadFile({
						url: `${getApp().globalData.http}upload_picture`,
						filePath: that.imgList[i],
						name: "file",
						formData: {
							token: getApp().globalData.token,
						},
						success: (res) => {
							var messaget = JSON.parse(res.data)
							arr.push(messaget)
							if (that.imgList.length == arr.length) {
								uni.hideLoading()
								that.arrlist = arr
								that.typevalue = 'images'
							}
						},
						fail: (res) => {
							uni.hideLoading()
							uni.showToast({
								title: '发布失败',
								icon: "none",
							})
						}
					})
				}
			},

			//删除图片
			delImg(index) {
				if (index == 0) {
					this.typevalue = ''
				}
				this.arrlist.splice(index, 1);
				this.arrlist = this.arrlist
			},

			//点击图片，放大预览
			viewImage(index) {
				var arrayArray = []
				for (var i = 0; i < this.arrlist.length; i++) {
					var obj = this.arrlist[i].url
					arrayArray.push(obj);

				}
				uni.previewImage({
					urls: arrayArray, // 需要预览的图片http链接列表
					current: index // 当前显示图片的http链接
				});
			},

			// 上传视频
			chooseVideo() {
				console.log('上传视频')
				uni.chooseVideo({
					count: 1,
					compressed: false,
					sourceType: ['camera', 'album'],
					success: (res) => {
						// console.log(res.size, "????")
						var mb = res.size
						var shuyi = mb / 1024 / 1024
						shuyi = parseInt(shuyi)
						// console.log(shuyi, "计算=========")
						if (shuyi >= 20) {
							uni.showToast({
								title: '素材超过20M大小限制，请重新选择',
								duration: 3000,
								icon: "none",
							})
							return
						} else {
							this.videodata(res.tempFilePath)
						}
					}
				})
			},

			// 上传视频后端返回视频链接
			videodata(e) {
				var src = e
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				uni.uploadFile({
					url: `${getApp().globalData.http}upload_picture`,
					filePath: src,
					name: "file",
					formData: {
						token: getApp().globalData.token,
					},
					success: (res) => {
						uni.hideLoading()
						var messaget = JSON.parse(res.data)
						this.srcList = messaget.url
						this.typevalue = 'video'
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '发布失败',
							icon: "none",
						})
					}
				})
			},

			//删除视频
			delectVideo() {
				this.srcList = ''
				this.typevalue = ''
			},

			//打开视频播放
			previewVideo(src) {
				this.previewVideoSrc = true
			},

			//关闭视频播放
			previewVideoClose() {
				this.previewVideoSrc = false
				this.typevalue = ''
			},

			//输入申诉内容问题
			describe(e) {
				this.content = e.detail.value
			},

			//提交
			async submit(e) {
				if (this.content == '') {
					uni.showToast({
						title: '请填写描述申诉问题',
						duration: 2000,
						icon: "none",
					})
					return
				}

				var picturevalue = ''
				if (this.typevalue == '') {
					picturevalue = ''
				}
				if (this.typevalue == 'video') {
					picturevalue = this.srcList
				}
				if (this.typevalue == 'images') {
					picturevalue = this.arrlist
				}
				let apply = await request(`${getApp().globalData.http}user/addAppeal`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					play_record_id: this.id,
					title: this.cover.typevalue,
					info: this.content,
					picture: picturevalue,
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						duration: 2000,
						icon: "none",
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
					uni.setStorageSync("update_quedindel", 1)
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						duration: 2000,
						icon: "none",
					})
				}
			},

			radioGroupChange(e) {
				this.cover.mode = e
				if (e == 0) {
					this.cover.typevalue = '娃娃卡洞内（除了玩法机）'
				} else if (e == 1) {
					this.cover.typevalue = '掉洞成功却显示失败'
				} else if (e == 2) {
					this.cover.typevalue = '游戏中闪退问题'
				} else if (e == 3) {
					this.cover.typevalue = '卡顿或按键延迟问题'
				} else {
					this.cover.typevalue = '机器硬件故障（爪子、机台）问题'
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
		padding: 20rpx;
	}

	.appealbox {
		padding: 0 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, 0.05);
	}

	// 图片区域
	.list-image {
		width: 170rpx;
		height: 170rpx;
		margin-right: 20rpx;
	}

	.list-image image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.list-title {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.list-time {
		font-size: 25rpx;
		color: #686868;
	}

	.list-border {
		padding: 50rpx 0;
	}

	.textborder {
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
		background-color: #FE5E4C;
		color: #ffffff;
	}

	.groupbox {
		padding: 20rpx 0;
	}

	.u-radio {
		padding: 50rpx 0 0 0;
	}

	.textarea-box {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		border: 1px solid #e6e6e6;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.neirong {
		height: 100rpx;
	}

	.textarea-text {
		display: flex;
		justify-content: flex-end;
		color: #ccc;
		font-size: 23rpx;
	}

	.uploadbox {
		width: 200rpx;
		height: 200rpx;
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.uploadbox image {
		width: 100%;
		height: 100%;
	}

	.uploadbox video {
		width: 100%;
		height: 100%;
	}

	.uploadpictureimage {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uploadpicture {
		width: 200rpx;
		height: 200rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;

	}

	.uploadpicture image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.cuIcon-close image {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 38rpx;
		height: 38rpx;
	}

	.uploadtext {
		font-size: 26rpx;
		color: #FF5E5E;
		margin-bottom: 20rpx;
	}

	.uploadwenzi {
		font-size: 25rpx;
		color: #777777;
		margin-bottom: 10rpx;
	}

	.appealbuttom {
		width: 500rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #353535;
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 50rpx;
		margin: 30rpx auto;
	}

	.htz-image-upload-Item-video-fixed {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		z-index: 996;
	}

	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: #000000;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;
		right: 32rpx;
		top: 25rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}

	.cuIcon-closea {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 999;
	}

	.cuIcon-closea image {
		width: 38rpx;
		height: 38rpx;
		margin-left: 8rpx;
	}
</style>